<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/registerandlogin.css' %}">
    <script>
        window.addEventListener('load', function() {
        const messages = document.getElementById('messages');
        if (messages) {
            setTimeout(() => {
                messages.classList.add('hide');
            }, 4000); // 4秒后开始淡出
            setTimeout(() => {
                messages.style.display = 'none';
            }, 5000); // 5秒后完全隐藏
        }
    });
    </script>
</head>
<body>
    <div class="container">
        <h1>登录 SecTraffic</h1>


        <!-- 消息反馈部分 -->
        {% if messages %}
            <div class="messages" id="messages">
                {% for message in messages %}
                    <div class="alert {{ message.tags }}">{{ message }}</div>
                {% endfor %}
            </div>
        {% endif %}

        <!-- 登录表单 -->
        <form action="{% url 'login' %}" method="POST">
            {% csrf_token %}

            <div class="identity-selection">
                <!-- CITY 用户类型选择 -->
                <label>
                    <div class="identity-option">
                        <img src="{% static 'icons/city.png' %}" alt="City 图标" class="identity-icon">
                        <span class="identity-text">CITY</span>
                    </div>
                    <input type="radio" name="user_type" value="CITY" required>
                </label>

                <!-- NODE 用户类型选择 -->
                <label>
                    <div class="identity-option">
                        <img src="{% static 'icons/node.png' %}" alt="Node 图标" class="identity-icon">
                        <span class="identity-text">NODE</span>
                    </div>
                    <input type="radio" name="user_type" value="NODE" required>
                </label>
            </div>

            <p>请选择您的身份</p>

            {#            分割线#}
            <div class="divider"></div>

            <!-- 用户名输入框 -->
            <div class="input-group">
                <img src="{% static 'icons/user.png' %}" alt="用户图标" class="userimg">
                <input type="text" name="username" placeholder="请输入用户名" required>
            </div>

            <!-- 密码输入框 -->
            <div class="input-group">
                <img src="{% static 'icons/lock.png' %}" alt="密码图标" class="img">
                <input type="password" name="password" placeholder="请输入密码" required>
            </div>



            <!-- 登录按钮 -->
            <button type="submit">登录</button>
        </form>

        <!-- 底部提示 -->
        <p class="register-link">还没有账号？ <a href="{% url 'register' %}">去注册</a></p>
    </div>

</body>
</html>
